<template>

  <div style="display: block;margin:20px;float: none;text-align: left;max-width: 800px">
    <el-button type="success" icon="el-icon-check" circle size="mini" v-show="show_history_btn"
               @click='showHistory'></el-button>
    {{ element.label }}
    <el-tooltip class="item" effect="dark" content="点击输入更多情况说明" placement="right-start"><i class="el-icon-edit"
                                                                                           @click='()=>{open=!open}'></i>
    </el-tooltip>

    <br> </br>
    <div v-if="element.type==showType[0]">
      <el-input
        v-model="value"
        :placeholder="element.placeholder"
        clearable
      />
    </div>
    <div v-else-if="element.type==showType[1]">
      <el-radio-group v-model="radio_value" @change="handleChange" style="min-width: 800px">
        <template v-for="item in getOptions">
          <el-radio v-bind:label="item.value" class="el-radio">{{ item.label }}</el-radio>
          <el-input v-if="item.label=='其他'" class="other"
                    v-model="other"
                    placeholder="如果选择其他,请具体说明"
                    clearable
                    @blur="handleChange"
          />
        </template>
      </el-radio-group>
      <br style="clear: both"/>
    </div>

    <div v-else-if="element.type==showType[2]">
      <el-checkbox-group v-model="checkbox_value" @change="handleChange">
        <template v-for="item in getOptions">
          <el-checkbox v-bind:label="item.value"  v-if="item.label!='其他'" class="el-radio">{{ item.label }}</el-checkbox>
          <div v-if="item.label=='其他'"  style="display:inline-block;">
            <div style="display:flex;">
            <el-checkbox v-bind:label="item.value" class="el-radio" style="display: inline-block">{{ item.label }}  </el-checkbox>
            <el-input  class="other"  v-model="other" placeholder='如果选择其他,请具体说明'  clearable style="display: inline-block"  @blur="handleChange"/>
            </div>
          </div>
        </template>
      </el-checkbox-group>
      <br style="clear: both"/>
    </div>

    <div v-else-if="element.type===showType[3]">
      <file-upload v-model="attachments"/>
      <br style="clear: both"/>
    </div>
    <el-input type="textarea" v-show="open" v-model="desc" class='desc' placeholder="请输入情况说明"
              @blur="handleChange"></el-input>
    <br/>
    <el-card style="margin-top: 20px" v-show="show_history">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.timestamp">
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>
<script>

import {
  addgeneralsurveyrecord,
  getgeneralsurveyrecord,
  updategeneralsurveyrecord,
  listgeneralsurveyrecord,
} from "@/api/system/generalsurveyrecord";

export default {
  props: [
    'element'
  ],
  dicts: ['question_show_type'],
  data() {
    return {
      check_disable:false,
      activities: [],
      showType: ['input', 'radio', 'checkbox', 'upload'],
      radio_value:-1,
      checkbox_value:[],
      open: false,
      show_history: false,
      show_history_btn: false,
      other: '',
      attachments: '',
      desc: '',
      value:'',
      insert: true,
      form: {
        questionId: this.element.questionId,
        companyId: this.$store.state.user.compId,
        userId: this.$store.state.user.userId,
        answer: null,
        attachments: null,
        questionDesc: null,
        other: null
      },
      old_form: {
        questionId: this.element.questionId,
        companyId: this.$store.state.user.compId,
        userId: this.$store.state.user.userId,
        answer: null,
        attachments: null,
        questionDesc: null,
        other: null
      }
    }
  },


  created() {
    console.log(this.checkbox_value,JSON.stringify(this.checkbox_value));
    this.init();
    this.activities=[]
    let tdata = this.element.records;
    console.log('tdata', tdata)
    let c=1;
    if (tdata != null && tdata.length > 0) {
      for (let record of tdata) {
        this.show_history_btn = true;
        if (record.userId === this.form.userId) {
          this.insert = false;
          if(this.element.type==this.showType[1]){
            this.radio_value=JSON.parse(record.answer);
          }
          if(this.element.type==this.showType[2]){
            this.checkbox_value= JSON.parse(record.answer);
          }
          this.other = record.other;
          this.desc = record.questionDesc;
          if (this.desc != null && this.desc.length > 0)
            this.open = true;
          this.attachments = record.attachments;
          this.old_form.answer = record.answer;
          this.old_form.other = record.other;
          this.old_form.questionDesc = record.questionDesc;
          this.old_form.attachments = record.attachments;

        }

        this.activities.push({'content': record.createBy + '已回答此问题', 'timestamp': record.createTime})

      }
    }

    console.log(' init this.activities', this.activities)
  },


  watch: {
    attachments: 'handleChange',
    element: {
      handler(newValue, oldValue) {
        if (newValue !== oldValue) {
          this.refresh(); //这里里面放你代码的逻辑
        }
      },
      immediate: true,//关键
      deep: true
    }

  },
  methods: {
    showHistory(){
      if(this.activities.length>0)
        this.show_history=!this.show_history;
    },
    init(){
      this.radio_value=-1;
      this.checkbox_value=[]
      this.activities=[]
      this.open = false;
      this.show_history = false;
      this.show_history_btn = false;
      this.attachments = '';
      this.desc = '';
      this.insert = true;
    },

    refresh() {
      this.init();
      let tdata = this.element.records;

      this.form.questionId=this.element.questionId;
      this.form.companyId=this.$store.state.user.compId;
      this.form.userId= this.$store.state.user.userId;

      this.old_form.questionId=this.element.questionId;
      this.old_form.companyId=this.$store.state.user.compId;
      this.old_form.userId= this.$store.state.user.userId;

      if (tdata != null && tdata.length > 0) {
        for (let record of tdata) {
          this.show_history_btn = true;
          if (record.userId === this.form.userId) {
            this.insert = false;
            if(this.element.type==this.showType[1]){
              this.radio_value=JSON.parse(record.answer);
            }
            if(this.element.type==this.showType[2]){
              this.checkbox_value= JSON.parse(record.answer);
            }
            this.other = record.other;
            this.desc = record.questionDesc;
            if (this.desc != null && this.desc.length > 0)
              this.open = true;
            this.attachments = record.attachments;


            this.form.answer = record.answer;
            this.form.other = record.other;
            this.form.questionDesc = record.questionDesc;
            this.form.attachments = record.attachments;


            this.old_form.answer = record.answer;
            this.old_form.other = record.other;
            this.old_form.questionDesc = record.questionDesc;
            this.old_form.attachments = record.attachments;

          }

          this.activities.push({'content': record.createBy + '已回答此问题', 'timestamp': record.createTime})

        }
      }

    },
    handleChange() {
      let toSubmit = false
      if(this.element.type==this.showType[1]){
        this.form.answer =JSON.stringify( this.radio_value);
      }
      if(this.element.type==this.showType[2]){
        this.form.answer = JSON.stringify(this.checkbox_value);
      }

      this.form.other = this.other;
      this.form.questionDesc = this.desc;
      this.form.attachments = this.attachments;
      toSubmit = JSON.stringify(this.old_form) == JSON.stringify(this.form)
      if (toSubmit)
        return;

      if (this.insert) {
        addgeneralsurveyrecord(this.form).then(response => {
          this.$notify({
            title: '重要通知',
            message: '保存成功',
            position: 'top-right',
            type: 'success'
          });
          this.show_history_btn = true;
        });
        this.insert = false
      } else {
        updategeneralsurveyrecord(this.form).then(response => {
          this.$notify({
            title: '重要通知',
            message: '更新成功',
            position: 'top-right',
            type: 'success'
          });
          this.show_history_btn = true;
        });
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  },
  computed: {
    getOptions() {
      return JSON.parse(this.element.options);
    }
  }

}

</script>

<style lang="scss" scoped>
.el-radio {
  display: block;
  margin: 10px 5px;
  float: left;
}

.el-radio {
  display: block;
  margin: 20px;
  float: left;
}

.desc {
  width: 100%;
  min-width: 256px;
}

.other {
  display: block;
  margin: 10px 5px;
  float: left;
  min-width: 150px;
  max-width: 300px;
}

</style>
